<template>
  <div class="columnLayout container">
    <section class="left-container">
      <h5>货物</h5>
      <el-menu
        default-active="0"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose">
        <el-menu-item :index="(index+'')" v-for="(item,index) in this.menus" :key="index">
          <span @click="getProductInfo(item.productId)">{{item.productName}}</span>
        </el-menu-item>
      </el-menu>
    </section>
    <section class="right-container">
      <div>
        <el-table
          size="mini"
          v-loading="loading"
          :data="tableData"
          border
          :header-cell-style="{
        'background-color': '#eeeeee !important',
      }">
          <el-table-column type="index" label="序号" width="60" align="center">
            <template slot-scope="scope">
          <span>{{
              (page.pageNo - 1) * page.pageSize + scope.$index + 1
            }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="支付方式"
            prop="payMode"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{$dictUtils.getDictLabel("payMode", scope.row.payMode, "")}}
            </template>
          </el-table-column>

          <el-table-column
            label="执行单价"
            prop="price"
            align="right"
            :show-overflow-tooltip="true">

            <template slot-scope="scope">
              {{scope.row.price?scope.row.price:'--'}}
            </template>
          </el-table-column>
          <el-table-column
            label="单价"
            prop="displayPrice"
            align="right"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{scope.row.displayPrice?scope.row.displayPrice:'--'}}
            </template>
          </el-table-column>
          <el-table-column
            label="含运费"
            prop="isFreightBoolean"
            :show-overflow-tooltip="true"
            min-width="100px"
          >
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.isFreightBoolean"
                           disabled>
<!--                {{scope.row.isFreightBoolean?'包含':'不包含'}}-->
              </el-checkbox>
            </template>

          </el-table-column>
          <el-table-column
            label="执行时间"
            prop="effectTime"
            :show-overflow-tooltip="true"
            min-width="200px"
          >
            <template slot-scope="scope">
              <span>
              {{scope.row.effectTime?scope.row.effectTime:'--'}}
            </span>
            </template>

          </el-table-column>
          <el-table-column prop="state" label="状态" width="140px">
            <template slot-scope="scope">
              <div class="state" :class="{empty: scope.row.state===1,process: scope.row.state===2 || scope.row.state===3 || scope.row.state===4,normal:scope.row.state === 100}"><span></span>{{ $dictUtils.getDictLabel("busState", scope.row.state, "") }}</div>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-size="page.pageSize"
          :current-page="page.pageNo"
          layout="total,prev,pager, next"
          :total="page.total"
        >
        </el-pagination>
      </div>
    </section>
  </div>

</template>
<script>
  import {getProductList, getProductInfo} from '@/api/business/business.js'

export default {
  components: {
  },
  data () {
    return {
      innerVisible: false,
      checked: false,
      loading: false,
      title: '货物明细',
      businessId: '',
      page: {
        pageSize: 10,
        pageNo: 1,
        total: 0
      },
      menus: [],
      tableData: [],
      productId: '',
      editForm: {
        businessId: '',
        deductType: '',
        basisUpper: '',
        basisLower: '',
        calcMethod: '',
        quantity: '',
        percent: '',
        random: ''
      }
    }
  },
  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    },
    // 左侧货物列表
    getProductList (businessId) {
      this.businessId = businessId
      getProductList({businessId: businessId}).then((res) => {
        if (res.data.code === '200') {
          this.menus = res.data.result
          console.log(this.menus)
          this.getProductInfo(this.menus[0].productId)
        }
      })
    },
    // 货物明细
    getProductInfo (businessProductId) {
      this.productId = businessProductId
      getProductInfo({
        productId: businessProductId,
        businessId: this.businessId,
        pageSize: this.page.pageSize,
        pageNo: this.page.pageNo
      }).then((res) => {
        if (res.data.code === '200') {
          this.tableData = res.data.result.list
          this.page.total = res.data.result.count
        }
      })
    },
    close () {
      this.innerVisible = false
    },
    handleSizeChange (e) {
      this.page.pageSize = e
      this.getProductInfo(this.productId)
    },
    handleCurrentChange (e) {
      this.page.pageNo = e
      this.getProductInfo(this.productId)
    }
  },

  mounted () {

  }
}
</script>
<style lang="scss" scoped>
.columnLayout{
  padding-left: 3px;
  padding-top: 2px;
  .el-pagination {
    margin-top: 30px;
   ;
  }
  .left-container{
    h5{
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #333333;
      margin: 10px 0;
      padding-left: 15px;
    }
    .el-menu-item{
      line-height: 32px;
      height: 32px;
      font-size: 16px;
        padding: 0 !important;
      span{
        display: inline-block;
        vertical-align: baseline;
          width: 100%;
          padding: 0 20px;
      }
    }
    //.el-menu-item.is-active{
    //  background-color: rgba(24, 144, 255, 0.2);
    //  color: #1890FF;
    //}
  }
  ::v-deep.el-table{
    td:last-child .cell{
      padding-right: 10px !important;
    }
    .state{
      font-size: 14px;
    }
  }
}
</style>
